<template>
  <el-card class="room-manager-card">
    <div class="room-manager-header">
      <span class="room-manager-title">直播间管理</span>
    </div>
    <div class="room-manager-form">
      <el-input v-model="uid" placeholder="输入用户UID" class="room-input" clearable />
      <el-input-number v-model="muteMinute" :min="1" :max="1440" :step="1" class="minute-input" style="margin-left:12px;" />
      <span class="minute-label">禁言分钟数</span>
      <el-button type="primary" @click="muteUser" style="margin-left:18px;">禁言</el-button>
      <el-button type="danger" @click="kickUser" style="margin-left:8px;">踢出</el-button>
    </div>
    <div v-if="result" class="result">{{ result }}</div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const uid = ref('')
const muteMinute = ref(5)
const result = ref('')

async function muteUser() {
  if (!uid.value) {
    result.value = '请输入用户UID'
    return
  }
  try {
    const res = await fetch('/api/room/mute', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ uid: uid.value, minute: muteMinute.value })
    })
    const data = await res.json()
    result.value = data.success ? `禁言${muteMinute.value}分钟成功` : ('禁言失败: ' + (data.msg || '未知错误'))
    if (data.success) ElMessage.success(result.value)
    else ElMessage.error(result.value)
  } catch (e) {
    result.value = '请求失败: ' + e
    ElMessage.error(result.value)
  }
}

async function kickUser() {
  if (!uid.value) {
    result.value = '请输入用户UID'
    return
  }
  try {
    const res = await fetch('/api/room/kick', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ uid: uid.value })
    })
    const data = await res.json()
    result.value = data.success ? '踢出成功' : ('踢出失败: ' + (data.msg || '未知错误'))
    if (data.success) ElMessage.success(result.value)
    else ElMessage.error(result.value)
  } catch (e) {
    result.value = '请求失败: ' + e
    ElMessage.error(result.value)
  }
}
</script>

<style scoped>
.room-manager-card {
  border-radius: 28px;
  box-shadow: 0 2px 12px #ffe0f7;
  margin: 48px auto 32px auto;
  background: #fff6fa;
  border: none;
  padding: 48px 24px 32px 24px;
  max-width: 520px;
  width: 100%;
  box-sizing: border-box;
}
.room-manager-header {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  justify-content: center;
}
.room-manager-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #b48ad6;
  letter-spacing: 2px;
  text-shadow: 0 4px 24px #fff6fa;
}
.room-manager-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.room-input {
  width: 200px;
}
.minute-input {
  width: 100px;
}
.minute-label {
  color: #b48ad6;
  font-size: 1.08rem;
  margin-left: 2px;
  margin-right: 8px;
}
.result {
  margin-top: 18px;
  color: #409eff;
  font-size: 1.13rem;
  text-align: center;
}
</style>
